<template>
  <div class="container_common chooseArea flex_column">
    <div class="searchBox">
      <van-search placeholder="请输入搜索关键词" v-model="keyWord" @input="searchInput()" />
    </div>

    <div class="location_section flex1">
      <div class="location_content">
        <li
          v-for="(item,i) in cityList"
          class="listItem bor_b"
          :key="i"
          @click="chooseCity(item.name,item.areaCode)"
        >
          <p class="name">{{item.name}}</p>
          <span class="code">+{{item.areaCode}}</span>
        </li>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  created() {
    this.init();
    let cityList = [
      { name: "中国 (China)", areaCode: "86" },
        { name: "中国香港 (Hong Kong)", areaCode: "852" },
        { name: "中国澳門 (Macau)", areaCode: "853" },
        { name: "中国台湾 (Taiwan)", areaCode: "886" },
        { name: "日本 (Japan)", areaCode: "81" },
        { name: "韩国 (South Korea)", areaCode: "82" },
        { name: "美国 (USA or Canada)", areaCode: "1" },
        { name: "阿富汗 (Afghanistan)", areaCode: "93" },
        { name: "阿尔巴尼亚 (Albania)", areaCode: "355" },
        { name: "阿尔及利亚 (Algeria)", areaCode: "213" },
        { name: "萨摩亚 (American Samoa)", areaCode: "684" },
        { name: "安道尔共和国 (Andorra)", areaCode: "376" },
        { name: "安哥拉 (Angola)", areaCode: "244" },
        { name: "安圭拉岛 (Anguilla)", areaCode: "1264" },
        { name: "南极洲 (Antarctica)", areaCode: "672" },
        { name: "安提瓜和巴布达 (Antigua and Barbuda)", areaCode: "1268" },
        { name: "阿根廷 (Argentina)", areaCode: "54" },
        { name: "亚美尼亚 (Armenia)", areaCode: "374" },
        { name: "阿鲁巴 (Aruba)", areaCode: "297" },
        { name: "澳大利亚 (Australia)", areaCode: "61" },
        { name: "奥地利 (Austria)", areaCode: "43" },
        { name: "阿塞拜疆 (Azerbaijan)", areaCode: "994" },
        { name: "巴哈马 (Bahamas)", areaCode: "1242" },
        { name: "巴林 (Bahrain)", areaCode: "973" },
        { name: "孟加拉国 (Bangladesh)", areaCode: "880" },
        { name: "巴巴多斯 (Barbados)", areaCode: "1246" },
        { name: "白俄罗斯 (Belarus)", areaCode: "375" },
        { name: "比利时 (Belgium)", areaCode: "32" },
        { name: "伯利兹城 (Belize)", areaCode: "501" },
        { name: "贝宁 (Benin)", areaCode: "229" },
        { name: "百慕大 (Bermuda)", areaCode: "1441" },
        { name: "不丹 (Bhutan)", areaCode: "975" },
        { name: "玻利维亚 (Bolivia)", areaCode: "591" },
        { name: "波斯尼亚和黑塞哥维那 (Bosnia and Herzegovina)", areaCode: "387" },
        { name: "博茨瓦纳 (Botswana)", areaCode: "267" },
        { name: "巴西 (Brazil)", areaCode: "55" },
        { name: "英属印度洋领地 (British Indian Ocean Territory)", areaCode: "246" },
        { name: "文莱达鲁萨兰国 (Brunei Darussalam)", areaCode: "673" },
        { name: "保加利亚 (Bulgaria)", areaCode: "359" },
        { name: "布基纳法索 (Burkina Faso)", areaCode: "226" },
        { name: "布隆迪 (Burundi)", areaCode: "257" },
        { name: "柬埔寨 (Cambodia)", areaCode: "855" },
        { name: "喀麦隆 (Cameroon)", areaCode: "237" },
        { name: "佛得角 (Cape Verde)", areaCode: "238" },
        { name: "开曼群岛 (Cayman Islands)", areaCode: "1345" },
        { name: "中非共和国 (Central African Republic)", areaCode: "236" },
        { name: "乍得 (Chad)", areaCode: "235" },
        { name: "智利 (Chile)", areaCode: "56" },
        { name: "圣延岛 (Christmas Island)", areaCode: "61" },
        { name: "科科斯群岛 (Cocos (Keeling) Islands)", areaCode: "61" },
        { name: "哥伦比亚(Colombia)", areaCode: "57" },
        { name: "科摩罗 (Comoros)", areaCode: "269" },
        { name: "刚果 (Congo)", areaCode: "242" },
        { name: "刚果民主共和国(Congo,The Democratic Republic Of The)", areaCode: "243" },
        { name: "库克群岛 (Cook Islands)", areaCode: "682" },
        { name: "哥斯达黎加 (Costa Rica)", areaCode: "506" },
        { name: "科特迪瓦 (Cote D Ivoire)", areaCode: "225" },
        { name: "克罗地亚 (Croatia)", areaCode: "385" },
        { name: "古巴 (Cuba)", areaCode: "53" },
        { name: "塞浦路斯 (Cyprus)", areaCode: "357" },
        { name: "捷克 (Czech Republic)", areaCode: "420" },
        { name: "丹麦 (Denmark)", areaCode: "45" },
        { name: "吉布提 (Djibouti)", areaCode: "253" },
        { name: "多米尼克国 (Dominica)", areaCode: "1767" },
        { name: "多米尼加共和国 (Dominican Republic)", areaCode: "1849" },
        { name: "东帝汶 (East Timor)", areaCode: "670" },
        { name: "厄瓜多尔 (Ecuador)", areaCode: "593" },
        { name: "埃及 (Egypt)", areaCode: "20" },
        { name: "萨尔瓦多 (El Salvador)", areaCode: "503" },
        { name: "赤道几内亚 (Equatorial Guinea)", areaCode: "240" },
        { name: "爱沙尼亚 (Estonia)", areaCode: "372" },
        { name: "埃塞俄比亚 (Ethiopia)", areaCode: "251" },
        { name: "福克兰群岛(Falkland Islands (Malvinas))", areaCode: "500" },
        { name: "法罗群岛 (Faroe Islands)", areaCode: "298" },
        { name: "斐济 (Fiji)", areaCode: "679" },
        { name: "芬兰 (Finland)", areaCode: "358" },
        { name: "法国 (France)", areaCode: "33" },
        { name: "法国大都会 (France Metropolitan)", areaCode: "33" },
        { name: "法属圭亚那 (French Guiana)", areaCode: "594" },
        { name: "法属玻里尼西亚 (French Polynesia)", areaCode: "689" },
        { name: "加蓬 (Gabon)", areaCode: "241" },
        { name: "冈比亚 (Gambia)", areaCode: "220" },
        { name: "格鲁吉亚 (Georgia)", areaCode: "995" },
        { name: "德国 (Germany)", areaCode: "49" },
        { name: "加纳 (Ghana)", areaCode: "233" },
        { name: "直布罗陀 (Gibraltar)", areaCode: "350" },
        { name: "希腊 (Greece)", areaCode: "30" },
        { name: "格陵兰 (Greenland)", areaCode: "45" },
        { name: "格林纳达 (Grenada)", areaCode: "1473" },
        { name: "瓜德罗普岛 (Guadeloupe)", areaCode: "590" },
        { name: "关岛 (Guam)", areaCode: "1671" },
        { name: "危地马拉 (Guatemala)", areaCode: "502" },
        { name: "几内亚 (Guinea)", areaCode: "224" },
        { name: "几内亚比绍 (Guinea-Bissau)", areaCode: "245" },
        { name: "圭亚那 (Guyana)", areaCode: "592" },
        { name: "海地 (Haiti)", areaCode: "509" },
        { name: "洪都拉斯 (Honduras)", areaCode: "504" },
        { name: "匈牙利 (Hungary)", areaCode: "36" },
        { name: "冰岛 (Iceland)", areaCode: "354" },
        { name: "印度 (India)", areaCode: "91" },
        { name: "印度尼西亚 (Indonesia)", areaCode: "62" },
        { name: "伊朗 (Iran (Islamic Republic of))", areaCode: "98" },
        { name: "伊拉克 (Iraq)", areaCode: "964" },
        { name: "爱尔兰 (Ireland)", areaCode: "353" },
        { name: "以色列 (Israel)", areaCode: "972" },
        { name: "意大利 (Italy)", areaCode: "39" },
        { name: "牙买加 (Jamaica)", areaCode: "1876" },
        { name: "约旦 (Jordan)", areaCode: "962" },
        { name: "哈萨克 (Kazakhstan)", areaCode: "7" },
        { name: "肯尼亚 (Kenya)", areaCode: "254" },
        { name: "科威特 (Kuwait)", areaCode: "965" },
        { name: "吉尔吉斯 (Kyrgyzstan)", areaCode: "996" },
        { name: "拉脱维亚 (Latvia)", areaCode: "371" },
        { name: "黎巴嫩 (Lebanon)", areaCode: "961" },
        { name: "莱索托 (Lesotho)", areaCode: "266" },
        { name: "利比里亚 (Liberia)", areaCode: "231" },
        { name: "利比亚 (Libyan Arab Jamahiriya)", areaCode: "218" },
        { name: "列支敦士登 (Liechtenstein)", areaCode: "423" },
        { name: "立陶宛 (Lithuania)", areaCode: "370" },
        { name: "卢森堡 (Luxembourg)", areaCode: "352" },
        { name: "马达加斯加 (Madagascar)", areaCode: "261" },
        { name: "马拉维 (Malawi)", areaCode: "265" },
        { name: "马来西亚 (Malaysia)", areaCode: "60" },
        { name: "马尔代夫 (Maldives)", areaCode: "960" },
        { name: "马里 (Mali)", areaCode: "223" },
        { name: "马尔他 (Malta)", areaCode: "356" },
        { name: "马提尼克岛 (Martinique)", areaCode: "596" },
        { name: "毛里塔尼亚 (Mauritania)", areaCode: "222" },
        { name: "毛里求斯(Mauritius)", areaCode: "230" },
        { name: "马约特 (Mayotte)", areaCode: "262" },
        { name: "墨西哥 (Mexico)", areaCode: "52" },
        { name: "密克罗尼西亚 (Micronesia)", areaCode: "691" },
        { name: "摩尔多瓦 (Moldova)", areaCode: "373" },
        { name: "摩纳哥 (Monaco)", areaCode: "377" },
        { name: "外蒙古 (Mongolia)", areaCode: "976" },
        { name: "黑山共和国 (Montenegro)", areaCode: "382" },
        { name: "蒙特塞拉特 (Montserrat)", areaCode: "1664" },
        { name: "摩洛哥 (Morocco)", areaCode: "212" },
        { name: "莫桑比克 (Mozambique)", areaCode: "258" },
        { name: "缅甸 (Myanmar)", areaCode: "95" },
        { name: "那米比亚 (Namibia)", areaCode: "264" },
        { name: "瑙鲁 (Nauru)", areaCode: "674" },
        { name: "尼泊尔 (Nepal)", areaCode: "977" },
        { name: "荷兰 (Netherlands)", areaCode: "31" },
        { name: "荷兰安的列斯群岛 (Netherlands Antilles)", areaCode: "599" },
        { name: "新喀里多尼亚 (New Caledonia)", areaCode: "687" },
        { name: "新西兰 (New Zealand)", areaCode: "64" },
        { name: "尼加拉瓜 (Nicaragua)", areaCode: "505" },
        { name: "尼日尔 (Niger)", areaCode: "227" },
        { name: "尼日利亚 (Nigeria)", areaCode: "234" },
        { name: "诺福克岛 (Norfolk Island)", areaCode: "6723" },
        { name: "朝鲜 (North Korea)", areaCode: "850" },
        { name: "北马里亚纳群岛 (Northern Mariana Islands)", areaCode: "1670" },
        { name: "挪威 (Norway)", areaCode: "47" },
        { name: "阿曼 (Oman)", areaCode: "968" },
        { name: "巴基斯坦 (Pakistan)", areaCode: "92" },
        { name: "帛琉 (Palau)", areaCode: "680" },
        { name: "巴勒斯坦 (Palestine)", areaCode: "970" },
        { name: "巴拿马 (Panama)", areaCode: "507" },
        { name: "巴布亚新几内亚 (Papua New Guinea)", areaCode: "675" },
        { name: "巴拉圭 (Paraguay)", areaCode: "595" },
        { name: "秘鲁 (Peru)", areaCode: "51" },
        { name: "菲律宾共和国 (Philippines)", areaCode: "63" },
        { name: "皮特凯恩岛 (Pitcairn)", areaCode: "64" },
        { name: "波兰 (Poland)", areaCode: "48" },
        { name: "葡萄牙 (Portugal)", areaCode: "351" },
        { name: "波多黎各 (Puerto Rico)", areaCode: "1787" },
        { name: "卡塔尔 (Qatar)", areaCode: "974" },
        { name: "留尼汪岛 (Reunion)", areaCode: "262" },
        { name: "罗马尼亚 (Romania)", areaCode: "40" },
        { name: "俄罗斯联邦 (Russian Federation)", areaCode: "7" },
        { name: "卢旺达 (Rwanda)", areaCode: "250" },
        { name: "美属萨摩亚 (Samoa)", areaCode: "685" },
        { name: "圣马力诺共和国 (San Marino)", areaCode: "378" },
        { name: "沙特阿拉伯 (Saudi Arabia)", areaCode: "966" },
        { name: "塞内加尔 (Senegal)", areaCode: "221" },
        { name: "塞尔维亚共和国 (Serbia)", areaCode: "381" },
        { name: "塞舌尔 (Seychelles)", areaCode: "248" },
        { name: "塞拉利昂 (Sierra Leone)", areaCode: "232" },
        { name: "新加坡 (Singapore)", areaCode: "65" },
        { name: "斯洛伐克 (Slovakia (Slovak Republic))", areaCode: "421" },
        { name: "斯洛文尼亚 (Slovenia)", areaCode: "386" },
        { name: "索罗门群岛 (Solomon Islands)", areaCode: "677" },
        { name: "索马里 (Somalia)", areaCode: "252" },
        { name: "南非 (South Africa)", areaCode: "27" },
        { name: "西班牙 (Spain)", areaCode: "34" },
        { name: "斯里兰卡 (Sri Lanka)", areaCode: "94" },
        { name: "苏丹 (Sudan)", areaCode: "249" },
        { name: "苏里南 (Suriname)", areaCode: "597" },
        { name: "斯威士兰 (Swaziland)", areaCode: "268" },
        { name: "瑞典 (Sweden)", areaCode: "46" },
        { name: "瑞士 (Switzerland)", areaCode: "41" },
        { name: "叙利亚 (Syrian Arab Republic)", areaCode: "963" },
        { name: "塔吉克 (Tajikistan)", areaCode: "992" },
        { name: "坦桑尼亚 (Tanzania)", areaCode: "255" },
        { name: "泰国 (Thailand)", areaCode: "66" },
        { name: "多哥 (Togo)", areaCode: "228" },
        { name: "汤加 (Tonga)", areaCode: "676" },
        { name: "特立尼达和多巴哥 (Trinidad and Tobago)", areaCode: "1868" },
        { name: "突尼斯 (Tunisia)", areaCode: "216" },
        { name: "土耳其 (Turkey)", areaCode: "90" },
        { name: "土库曼 (Turkmenistan)", areaCode: "993" },
        { name: "土克斯及开科斯群岛 (Turks and Caicos Islands)", areaCode: "1809" },
        { name: "乌干达 (Uganda)", areaCode: "256" },
        { name: "乌克兰 (Ukraine)", areaCode: "380" },
        { name: "阿拉伯联合酋长国 (United Arab Emirates)", areaCode: "971" },
        { name: "英国 (United Kingdom)", areaCode: "44" },
        { name: "乌拉圭 (Uruguay)", areaCode: "598" },
        { name: "乌兹别克斯坦 (Uzbekistan)", areaCode: "998" },
        { name: "瓦努阿图 (Vanuatu)", areaCode: "678" },
        { name: "梵蒂冈 (Vatican City State (Holy See))", areaCode: "39" },
        { name: "委内瑞拉 (Venezuela)", areaCode: "58" },
        { name: "越南 (Vietnam)", areaCode: "84" },
        { name: "维尔京群岛(英国) (Virgin Islands (British))", areaCode: "1284" },
        { name: "维尔京群岛(美国) (Virgin Islands (U.S.))", areaCode: "1340" },
        { name: "西撒哈拉 (Western Sahara)", areaCode: "685" },
        { name: "也门 (Yemen)", areaCode: "967" },
        { name: "南斯拉夫 (Yugoslavia)", areaCode: "381" },
        { name: "赞比亚 (Zambia)", areaCode: "260" },
        { name: "津巴布韦 (Zimbabwe)", areaCode: "263" },
        { name: "阿布哈兹 (the Republic of Abkhazia)", areaCode: "7" },
        { name: "南奥赛梯 (the Republic of South Ossetia)", areaCode: "7" },
        { name: "泽西岛 (Bailiwick of Jersey)", areaCode: "44" },
        { name: "老挝 (Lao People s Democratic Republic)", areaCode: "856" },
        { name: "马其顿 (The Republic of Macedonia)", areaCode: "389" },
        { name: "圣基茨和尼维斯(The Federation of Saint Kitts and Nevis)", areaCode: "1869" },
        { name: "圣卢西亚岛 (Santa Luzia Island)", areaCode: "1758" },
        { name: "圣文森特和格林纳丁斯(Saint Vincent and the Grenadines)", areaCode: "1784" },
        { name: "圣多美和普林西比 (Sao Tome and Principe)", areaCode: "239" },
        { name: "南苏丹共和国 (The Republic of South Sudan)", areaCode: "211" }
    ];
    cityList.map(item=>{
      if(item.name.indexOf('(')>-1){
       item.name=item.name.substring(0,item.name.indexOf('('))
      }
    })
    this.cityList = cityList;
    this.cityList1 = cityList;
  },
  components: {
  },
  data() {
    return {
      cityList: [], //国家列表
      cityList1: [],
      keyWord: "" //关键词搜索
    };
  },
  methods: {
    ...mapActions([
      "setnavTitle",
      "setnavBarState",
      "settabBarState",
      "setbackRouter",
      "setnavBarArrow",
      "setCountryCode",
      "setCountryName"
    ]),
    init() {
      this.setnavTitle("选择国家或地区");
      this.setbackRouter("");
      this.setnavBarState(true);
      this.settabBarState(false);
      this.setnavBarArrow(true);
    }, // 初始化页面
    //search
    searchInput: function() {
      var $this = this;
      var keyword = $this.keyWord.replace(/\s+/g, "");
      if (keyword == "") {
        this.cityList = this.cityList1;
      } else {
        keyword = keyword.toUpperCase();
        let cityList = this.cityList1;
        let arr = [];
        cityList.forEach(ele => {
          if (ele.name.indexOf(keyword) != -1) {
            arr.push(ele);
          }
        });
        this.cityList = arr;
      }
    },
    //选择国家码
    chooseCity(name,code){
      // console.log(name)
      // console.log(code)
      this.setCountryCode(code);
      this.setCountryName(name);
      setTimeout(res=>{
         this.$router.go(-1);
      },300)
    }
  }
};
</script>
<style lang="scss">
</style>
<style lang="scss" scoped>
.chooseArea {
  .searchBox {
    margin: 0 -15px;
  }
  .location_section {
    .location_content {
      width: 100%;
      overflow-y: scroll;
      .listItem {
        display: flex;
        font-size: 14px;
        padding: 10px 0;
        align-items: center;
        .name {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>